<template>
  <div>

<!--    <el-dialog-->
<!--      title="请输入你的回答"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="50%"-->
<!--      center-->
<!--      :before-close="handleClose">-->
<!--      <el-input-->
<!--        type="textarea"-->
<!--        :rows="20"-->
<!--        placeholder="请输入内容"-->
<!--        v-model="textarea" >-->
<!--      </el-input>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false" v-on:click="answer()">确认回复</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->

    <el-dialog
      title="查看问题"
      :visible.sync="dialogVisible1"
      width="50%"
      center
      top="30vh"
      :before-close="handleClose">
      <span><!--{{this.content}}--> <div v-html="this.content"></div></span>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

    <el-dialog
      title="查看我的回答"
      :visible.sync="dialogVisible2"
      width="80%"
      center
      top="30vh"
      :before-close="handleClose">
      <span><!--{{this.answers.answer_content}}--> <div v-html="this.answers.answer_content"></div></span>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

    <div v-for="(item,index) in message.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index">
      <div class="message" >
        <div><img class="img1" :src=item.avatar></div>
         <div>
          <div style="margin-left: 20px"><strong style="color: #343333">{{item.username}}</strong>&nbsp;&nbsp;&nbsp;向你发起提问</div>

          <div style="margin-left: 20px;margin-top: 10px;" class="textOVerThree"><a  v-on:click="watch(item.question_content)" style="color: #6f42c1;cursor: pointer;font-size: 18px" @click="dialogVisible1=true" v-html="item.question_content"><!--{{item.question_content}}--></a></div>
          <div style="margin-left: 20px;margin-top: 10px"><span>{{item.create_time}}</span>
            <a  class="a1" @click="isShow(index);getID(item.id)" v-on:click="findmyavatar()"><i class="el-icon-edit-outline"></i>回答</a>
            <a style="margin-left: 20px" class="a1" @click="dialogVisible2=true" v-on:click="findBYID(item.id)"><i class="el-icon-chat-round"></i>我的回答</a>
            <a style="margin-left: 100px" v-if="item.answer_content"><i class="el-icon-s-flag" style="color: #10dc6f"></i>已回答</a>
          </div>
          <div  ref="show" class="active" style="margin-top: 20px">
            <div style="" ><img class="img1" :src=avatars.avatar style="margin-right: 20px"></div>
<!--            <el-input  type="textarea"
                       :rows="2"
                       placeholder="请输入内容"
                       v-model="textarea[(currentPage-1)*pageSize+index]"
                       style="width: 1000px;"
            >
            </el-input>-->
            <mavon-editor
              v-model="replyComment1"
              style="height: 50%;"
              placeholder="说说你的高见"
              ref=md
              @change="changeData"
              @save="answer()"
              fontSize="16px">
            </mavon-editor>
            <el-button  type="success" v-on:click="answer((currentPage-1)*pageSize+index)">发表回答</el-button>
          </div>
         </div>
      </div>
    </div>

    <el-pagination align='center'
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[1,3,5,10,20]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="message.length">
    </el-pagination>

  </div>
</template>

<script>
import Header from "../components/Header";
import axios from "axios";


export default {
  name: "MyMessage",
  components: {Header},
  data(){
    return{
      render:'',
      currentPage:1,
      totalCount:0,
      pageSize:10,

        message:[],
        users:[],
        // dialogVisible: false,
        dialogVisible1: false,
        dialogVisible2: false,
        textarea:[],
        id:'',
        username:'',
        index:'',
        content:'',
        content2:'',
        answers:'',
        display:'display:none',
        avatars:''
    }
  },
  methods: {
    changeData(value, render) {
      // value中是文本值,render是渲染出的html文本
      this.render = render;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    isShow(index) {
      let a = this.$refs.show[index]		//	通过下标找到对应同级节点
      if (a.getAttribute('class') === 'active') {
        a.setAttribute('class', 'active1')
      } else {
        a.setAttribute('class', 'active')
      }
    },
    getID(iid) {
      this.id = iid;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    watchmessage() {
      this.$http.post('http://localhost:8888/Interlocution/findInterlocution',
        {"experts_id":JSON.parse(localStorage.getItem("users")).id},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.message = res.data.data;
        } else {
        }
      })
    },
    answer(indexx) {
      this.index=indexx;
      axios.post('http://localhost:8888/Interlocution/updateInterlocution',
        {
          "answer_content": this.render,
          "id": this.id
        },
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          alert(res.data.msg);
        } else {
          alert(res.data.msg);
        }
      })
      this.$router.go(0);
    },
    watch(contents) {
      this.content = contents;
    },
    findBYID(iid) {
      this.id = iid;
      this.$http.post('http://localhost:8888/Interlocution/findBYID',
        {"id": this.id},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.answers = res.data.data;
        } else {
        }
      })
    },
    findmyavatar(){
      this.$http.post('http://localhost:8888/Interlocution/findInterlocutionexperts',
        {"experts_id":JSON.parse(localStorage.getItem("users")).id},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.avatars= res.data.data;
        } else {
        }
      })
    },
    show: function () {
      if (this.display === "display:none") {
        this.display = "";
      } else {
        this.display = "display:none";
      }
    }
  },
  created() {
    this.watchmessage();
  }
}
</script>

<style scoped>
.textOVerThree {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap:break-word;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  width: 65vw;
}
.message{
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(65, 105, 225, 0.2);
  display: flex;
  margin-top: 20px;
  padding: 10px 0 10px 0;
}

.img1{
  width:50px;
  height:50px;
  border-radius: 50%;
}

.a1:hover{
  color: #920ed3;
  cursor:pointer
}

.active{
  display:none;
}

.active1{
  display:flex;
}
</style>
